import React, { Component, Fragment } from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import { connect } from 'dva';
import Link from 'umi/link';
import { Icon } from 'antd';
import GlobalFooter from '@/components/GlobalFooter';
import DocumentTitle from 'react-document-title';
import SelectLang from '@/components/SelectLang';
import moment from 'moment';
import styles from './UserLayout.less';
import logo from '../assets/hpu.svg';
import getPageTitle from '@/utils/getPageTitle';

const links = [
  {
    key: 'help',
    title: formatMessage({ id: 'layout.user.link.help' }),
    href: '',
  },
  {
    key: 'privacy',
    title: formatMessage({ id: 'layout.user.link.privacy' }),
    href: '',
  },
  {
    key: 'terms',
    title: formatMessage({ id: 'layout.user.link.terms' }),
    href: '',
  },
];

const copyright = (
  <Fragment>
    Copyright <Icon type="copyright" /> 2018 河南理工大学测绘学院
  </Fragment>
);

class UserLayout extends Component {
  state = {
    currentTime: moment().format('HH:mm:ss'),
    timer: null,
  };

  componentDidMount() {
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });

    this.setState({
      timer: setInterval(() => {
        this.changeCurrentTime();
      }, 1000),
    });
  }

  componentWillUnmount() {
    const { timer } = this.state;
    clearInterval(timer);
  }

  changeCurrentTime = () => {
    this.setState({
      currentTime: moment().format('HH:mm:ss'),
    });
  };

  render() {
    const {
      children,
      location: { pathname },
      breadcrumbNameMap,
    } = this.props;
    const { currentTime } = this.state;
    return (
      <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
        <>
          <div className={styles.bgatom}>
            <ul className={styles.circles}>
              <li />
              <li />
              <li />
              <li />
              <li />
              <li />
              <li />
              <li />
              <li />
              <li />
            </ul>
          </div>

          <div className={styles.timebg}>{currentTime}</div>
          <div className={styles.container}>
            <div className={styles.lang}>
              <SelectLang />
            </div>
            <div className={styles.content}>
              <div className={styles.top}>
                <div className={styles.header}>
                  <Link to="/">
                    <img alt="logo" className={styles.logo} src={logo} />
                    <span className={styles.title}>河南理工大学</span>
                  </Link>
                </div>
                <div className={styles.desc}>好学力行，明德任责</div>
              </div>
              {children}
            </div>
            <GlobalFooter links={links} copyright={copyright} />
          </div>
        </>
      </DocumentTitle>
    );
  }
}

export default connect(({ menu: menuModel }) => ({
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
}))(UserLayout);
